<template>
    <div class="xtx-cart-page">
        <div class="container">
            <brand>
                <brandItem to="/">首页</brandItem>
                <brandItem>购物车</brandItem>
            </brand>
            <div class="cart">
                <table>
                    <thead>
                        <tr>
                            <th width="120">
                                全选<input type="checkbox" name="" id="" class="txt2" v-model="show"
                                    @click="changeall(!show)" />
                            </th>
                            <th width="400">商品信息</th>
                            <th width="220">单价</th>
                            <th width="180">数量</th>
                            <th width="180">小计</th>
                            <th width="140">操作</th>
                        </tr>
                    </thead>
                    <!-- 有效商品 -->
                    <tbody>
                        <tr v-for="(item, key) in list" :key="key">
                            <td style="text-align: center;">
                                <input type="checkbox" class="txt2" v-model="item.selected" @click="changeone(key)" />
                            </td>
                            <td>
                                <div class="goods">
                                    <RouterLink to="/">
                                        <img :src="item.picture" alt=""
                                            @click="$router.push('/delete?id=' + item.stock)">
                                    </RouterLink>
                                    <div>
                                        <p class="name ellipsis">{{ item.name }}</p>
                                        <!-- 选择规格组件 -->

                                    </div>
                                </div>
                            </td>
                            <td class="tc">
                                <p>&yen;{{ item.nowPrice }}</p>
                                <p>比加入时降价 <span class="red">&yen;{{ item.price - item.nowPrice }}</span></p>
                            </td>
                           
                            <td class="tc">
                                <!-- <goodsnumbox :num="item.count" @jian="jian(key)" @jia="jia(key)"></goodsnumbox>
                                 -->
                                 
                                <div class="good-numbox">
                                    <div class="label">数量</div>
                                    <div class="numbox">
                                        <button href="javascript:;" @click="jian(key)">-</button>
                                        <input type="text" readonly v-model="item.count">
                                        <button href="javascript:;" @click="jia(key)">+</button>
                                    </div>
                                </div>
                            </td>
                            <td class="tc">
                                <p class="f16 red">¥{{ (item.count * item.price).toFixed(2) }}</p>
                            </td>
                            <td class="tc">
                                <p><a href="javascript:;">移入收藏夹</a></p>
                                <p><a class="green" href="javascript:;" @click="dels(key)">删除</a></p>
                                <p><a href="javascript:;">找相似</a></p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <!-- 操作栏 -->
                <div class="action">
                    <div class="batch">
                        全选<input type="checkbox" name="" id="" class="txt2" v-model="show" @click="changeall(!show)" />
                        <a href="javascript:;" @click="dells()">删除商品</a>
                        <a href="javascript:;">移入收藏夹</a>
                    </div>
                    <div class="total">
                        共 {{ $store.getters["cart/changeList"] }} 件商品，已选择 {{
                                $store.getters["cart/numberFlag"]
                        }}件，商品合计：
                        <span class="red">¥{{ $store.getters["cart/sumPrice"].toFixed(2) }}</span>
                        <button type="primary" class="btn1" @click="member">下单结算</button>
                    </div>
                </div>
                <!-- 猜你喜欢
                <goodsRelevant :relevantlist="relevantlist" :title="title"></goodsRelevant> -->
            </div>

            <!-- 猜你喜欢 -->
            <GoodRelevant :relevantlist="relevantlist" :title="title" />

        </div>
    </div>
</template>

<script>
import brandItem from '@/components/utils/brand/BrandItem.vue'
import brand from '@/components/utils/brand/BrandView.vue'
import GoodRelevant from '@/components/Detail/GoodsRecommend.vue'
// import goodsnumbox from '@/components/utils/goodsnumbox.vue'
import { getRelevant } from '@/Api/detail'
import { mapMutations } from "vuex"
// import confirm from '@/components/utils/tan/TanKuang.vue'
import { cartDel } from '@/Api/cart'
export default {
    components: { brand, brandItem, GoodRelevant },
    data() {
        return {
            list: [],
            title: "猜你喜欢",
            relevantlist: [],
            show: false
        }
    },
    methods: {
        ...mapMutations("cart", ["changeone", "changeall", "jian", "jia", "dell"]),
        // 猜你喜欢数据
        async xuan1(id) {
            var arr = {
                id: id,
                limit: 16,
            };
            let { data: res } = await getRelevant(arr);
            this.relevantlist = res.result;
        },
        // 单个删除
         dels(key) {
            this.$confirm({ text: "温馨提示", message: "你确定要删除吗?" }).then(async () => {
                if (this.$store.state.user.userInfo && this.$store.state.user.userInfo.token) {
                    let { data: res } = await cartDel([this.list[key].skuId])
                    if(res.msg=='操作成功'){
                        this.$store.commit('cart/del', key)
                        this.$message({text:'删除成功',type:'success'})
                        this.getList()
                    }else{
                        this.$message({text:'删除失败',type:'error'})
                    }
                } else {
                    this.$store.commit('cart/del', key)
                }

            }).catch(() => {
                console.log("取消了");
            })
        },
        dells() {
            this.$confirm({ text: "温馨提示", message: "你确定要删除吗?" }).then(async () => {
                if (this.$store.state.user.userInfo && this.$store.state.user.userInfo.token) {
                    let { data: res } = await cartDel([],true)
                    if(res.msg=='操作成功'){
                        this.dell()
                        this.$message({text:'删除成功',type:'success'})
                        this.getList()
                    }else{
                        this.$message({text:'删除失败',type:'error'})
                    }
                }else{
                    this.dell()
                }
                
            }).catch(() => {
                console.log("取消了");
            })
        },
        getList() {
            if (this.$store.state.user.userInfo && this.$store.state.user.userInfo.token) {
                this.$store.dispatch("cart/asynccartlist")
            }
            this.list = this.$store.state.cart.list
        },
        member(){
            if(this.list.length==0){
                this.$message({text:'至少选中一件商品才能结算',type:'error'})
            }
            if(!this.$store.state.user.userInfo.token){
                // this.$confirm({text:'下单结算需要登录，您是否去登录'}).then(()=>{
                    this.$router.push('/login')
                // })
            }else{
                this.$router.push('/member/checkout')
            }
        }
        

    },
    mounted() {
        this.xuan1()
        this.getList()
    },
    // computed: {
    //    
    // },
    watch: {
        // 反选
        list: {
            handler(val) {
                var arr = val.filter(item => item.selected)
                if (arr.length == val.length) {
                    this.show = true
                } else {
                    this.show = false
                }
                if (val.length == 0) {
                    this.show = false
                }
            },
            deep: true,
            immediate: true
        },
    }
}
</script>


<style scoped lang="scss">
@import '@/assets/css/variables.scss';

.xtx-cart-page {
    width: 1240px;
    margin: auto;
}

.tc {
    text-align: center;

    .xtx-numbox {
        margin: 0 auto;
        width: 120px;
    }
}

.red {
    color: $priceColor;
}

.green {
    color: $xtxColor
}

.f16 {
    font-size: 16px;
}

.goods {
    display: flex;
    align-items: center;

    img {
        width: 100px;
        height: 100px;
    }

    >div {
        width: 280px;
        font-size: 16px;
        padding-left: 10px;

        .attr {
            font-size: 14px;
            color: #999;
        }
    }
}

.action {
    display: flex;
    background: #fff;
    margin-top: 20px;
    height: 80px;
    align-items: center;
    font-size: 16px;
    justify-content: space-between;
    padding: 0 30px;

    .xtx-checkbox {
        color: #999;
    }

    .batch {
        a {
            margin-left: 20px;
        }
    }

    .red {
        font-size: 18px;
        margin-right: 20px;
        font-weight: bold;
    }
}

.tit {
    color: #666;
    font-size: 16px;
    font-weight: normal;
    line-height: 50px;
}

.xtx-cart-page {
    .cart {
        background: #fff;
        color: #666;

        table {
            border-spacing: 0;
            border-collapse: collapse;
            line-height: 24px;

            th,
            td {
                padding: 10px;
                border-bottom: 1px solid #f5f5f5;

                &:first-child {
                    text-align: left;
                    padding-left: 30px;
                    color: #999;
                }
            }

            th {
                font-size: 16px;
                font-weight: normal;
                line-height: 50px;
            }
        }
    }
}




.good-numbox {
    display: flex;
    align-items: center;

    .label {
        width: 60px;
        color: #999;
        padding-left: 10px;
    }

    .numbox {
        width: 120px;
        height: 30px;
        border: 1px solid #e4e4e4;
        display: flex;

        >button {
            width: 29px;
            line-height: 28px;
            text-align: center;
            background: #f8f8f8;
            font-size: 16px;
            color: #666;
            border: none;

            &:first-of-type {
                border-right: 1px solid #e4e4e4;
            }

            &:last-of-type {
                border-left: 1px solid #e4e4e4;
            }
        }

        >input {
            width: 60px;
            padding: 0 5px;
            text-align: center;
            color: #666;
        }
    }
}
</style>